<template>
    <el-form style="padding: 20px;" :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="searchObj.name" placeholder="讲师名" clearable/>
        </el-form-item>
        <el-form-item>
            <el-select v-model="searchObj.level" placeholder="讲师头衔" clearable>
                <el-option label="高级讲师" value="1" />
                <el-option label="首席讲师" value="2" />
            </el-select>
        </el-form-item>
        <el-form-item label="添加时间">
            <el-date-picker v-model="searchObj.begin" type="date" placeholder="选择开始时间" clearable/>
            <el-date-picker v-model="searchObj.end" type="date" placeholder="选择截止时间" clearable/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :icon="Search" @click="search">查询</el-button>
            <el-button @click="reset">清空</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="searchList" border style="width: 100%" highlight-current-row>
        <el-table-column type="index" :index="index" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="名称" width="80" align="center" />
        <el-table-column prop="level" label="头衔" width="100" align="center">
        <template #default="scope">
        {{scope.row.level===1?'高级讲师':'首席讲师'}}
      </template>
      </el-table-column>
        <el-table-column prop="intro" label="资历" />
        <el-table-column prop="gmtCreate" label="添加时间" width="180" align="center" />
        <el-table-column prop="sort" label="排序" width="80" align="center" />
        <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
                <el-button type="primary" size="small" :icon="EditPen">编辑</el-button>
                <el-button type="danger" size="small" :icon="Delete">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
        <el-pagination
        style="display: flex; justify-content: center; margin: 20px"
      v-model:current-page="page"
      v-model:page-size="limit"
      layout="total,  prev, pager, next, jumper"
      :total="totalCount"
      @current-change="gotoPage"
    />
</template>
  
<script setup>
import { reactive, ref, toRefs } from 'vue'
import { Search,Delete,EditPen } from '@element-plus/icons-vue'
import teacherApi from '../../api/teacher'

// 序号
const index = (index) => {
  return index +1
}
const page = ref(1)// 当前页
const limit = ref(10)// 每页数据条数
const totalCount = ref(0)//数据总条数
const state = reactive({
    searchList:[],// 讲师列表数据
    searchObj:{},// 讲师列表查询参数对象
})

const {searchList,searchObj} = toRefs(state)

// 分页方法
const gotoPage=(pageIndex)=>{
    getList(pageIndex)
}

// 初始化讲师列表
const getList=(page=1)=>{
    // 调用api接口获取讲师列表数据
    teacherApi.getList(page,limit.value,state.searchObj).then(res=>{
    // console.log(res);
    
    // 给讲师列表数据赋值
    state.searchList=res.data.items
    // 给记录总数赋值
    totalCount.value=res.data.totalCount
})
}
getList()

// 多条件搜索
const search = () => {
    getList()
}

// 清空
const reset=()=>{
    state.searchObj={}
    getList()
}

</script>
  